<template>
    <template v-for="item in data">
        <el-sub-menu :index="item.link ? item.link : item.path ? item.path:Math.random().toString()" v-if="item.type === 'directory'">
            <template #title>
                <svg-icon :style="iconsStyle" :name="item.icon" />
                <span>{{ item.name }}</span>
            </template>
            <MenuItem :data="item.children" />
        </el-sub-menu>
        <el-menu-item   :index="item.path" v-else>
            <svg-icon :style="iconsStyle" :name="item.icon" />
            <template #title>
                {{ item.name }}
            </template>
        </el-menu-item>
    </template>
</template>

<script lang='ts' setup>
import { useSetting } from '@/pinia';
import { MenuRouter as MenuItemProps } from '@/types/menu'
import { computed } from 'vue';
import MenuItem from './index.vue'
const SettingStore = useSetting()
interface IProps {
    data: MenuItemProps[] | undefined
}
defineProps<IProps>()
const iconsStyle = computed(()=>{
  return  !SettingStore.isCollapse ? {
        fontSize:"24px",
        margin:"0px 5px"
    } : {
        fontSize:"24px",
    }
})

</script>

<style lang="less">

:deep(.el-sub-menu__title.icons) {
    margin: 0px!important;
}
</style>